<template>
  <div>
    <div style="margin-bottom: 20px;">做3d柱状图 常用的两种方式就是 自定义图形和象型柱图:</div>
    <div>3D圆柱体渐变组件-------象型柱图</div>
    <div class="barecharts" ref="barchat"></div>
    <div>3D横向柱体有棱角渐变组件-------象型柱图</div>
    <div class="barecharts" ref="barchat1"></div>
    <bar1></bar1>
    <bar2></bar2>
    <bar3></bar3> 
  </div>
</template>

<script>
import echarts from 'echarts'
import bar1 from '@/views/emergency/barecharts/bar1.vue'
import bar2 from '@/views/emergency/barecharts/bar2.vue'
import bar3 from '@/views/emergency/barecharts/bar3.vue'
let data = [220, 182, 191, 234, 290, 330]
// let barWidth = 40
//组织数据
let setData = function (data, constData, showData) {
  data.filter(function (item) {
    // console.log('item',item)
    if (item) {
      constData.push(1);
      showData.push(item);
    } else {
      constData.push(0);
      showData.push({
        value: 1,
        itemStyle: {
          normal: {
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 2,
            color: "rgba(0,0,0,0)",
          },
        },
      });
    }
  });
}
//组织颜色
let setColor = function (colorArr) {
  let color = {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
      x: 0,
      x2: 0,
      y: 0,
      y2: 1, */
    colorStops: [{
      offset: 0,
      color: colorArr[0],
    },
    {
      offset: 0.5,
      color: colorArr[0],
    },
    {
      offset: 0.5,
      color: colorArr[1],
    },
    {
      offset: 1,
      color: colorArr[1],
    },
    ],
  };
  return color
}

var vehicle = [45, 25, 48, 62, 35]
var controlBall = [23, 12, 52, 14, 9]
var barth = [43, 12, 32, 14, 19]

var barWidth = 30;

var constData1 = [];
var showData1 = [];

var constData2 = [];
var showData2 = [];

var constData3 = [];
var showData3 = [];

setData(vehicle, constData1, showData1)
setData(controlBall, constData2, showData2)
setData(barth, constData3, showData3)

var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];
var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
var colorArr3 = ["#345A8B", "#387ABD", "#51C0DB"];

var color1 = setColor(colorArr1)
var color2 = setColor(colorArr2)
var color3 = setColor(colorArr3)

export default {
  components:{
    bar1,
    bar2,
    bar3
  },
  data(){
    return{
      chart:null,
      chart1: null,
      color: [
        {
          startColor: '#53C7FF',
          endColor: 'rgba(83, 199, 255, 0.1)',
          topStartColor: '#53C7FF',
          topEndColor: '#53C7FF',
          leftStartColor: '#53C7FF',
          leftEndColor: 'rgba(83, 199, 255, 0.1)',
          rightStartColor: '#53C7FF',
          rightEndColor: 'rgba(83, 199, 255, 0.1)'
        },
        {
          startColor: '#76C6C4',
          endColor: 'rgba(118, 198, 196, 0.1)',
          topStartColor: '#76C6C4',
          topEndColor: '#76C6C4',
          leftStartColor: '#76C6C4',
          leftEndColor: 'rgba(118, 198, 196, 0.1)',
          rightStartColor: '#76C6C4',
          rightEndColor: 'rgba(118, 198, 196, 0.1)'
        }
      ]
    }
  },
  mounted(){
    this.getSCE()
    this.getSCE1()
  },
  methods:{
    getSCE() {
      const option = {
        tooltip: {},
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E', 'F'],
          axisLabel: {
            inside: false,
            textStyle: {
              color: '#000'
            }
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          // 底部的椭圆形(象形柱图):pictorialBar
          {
            type: "pictorialBar", // pictorialBar(象形柱图)
            label: { // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
              show: true, //是否显示标签
              position: ['35%','-30'], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
              color: '#01E4FF',
              fontSize: 14
            },
            symbolSize: [40, 20], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
            symbolOffset: [0, 10], // 图形相对于原本位置的偏移
            z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
            itemStyle: { // 图形样式
              // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
              // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                // 这里 offset: 0 1 ,表示从下往上的渐变色
                {
                  offset: 0, // 0%处的颜色
                  color: "rgba(31, 155, 255, 1)"
                },
                {
                  offset: 1, // 100%处的颜色
                    color: "rgba(0, 229, 255, 1)"
                }
              ])
            },
            data: [220, 182, 191, 234, 290, 330]
          },
          { // For shadow
            type: 'bar',
            itemStyle: {
              color: 'rgba(0,0,0,0.05)'
            },
            barWidth:40,
            barGap: '-100%',
            barCategoryGap: '40%',
            data: [500, 500, 500, 500, 500, 500],
            animation: false
          },
          {
            type: 'bar',
            barWidth: 40,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            data: [220, 182, 191, 234, 290, 330]
          },
          // 顶部的椭圆形(象形柱图):pictorialBar
          {
            type: "pictorialBar",
            symbolSize: [40, 20],
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: "end",   
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                      offset: 0,
                      color: "rgba(31, 155, 255, 1)"
                },
                {
                  offset: 1,
                    color: "rgba(0, 229, 255, 1)"
                }
              ], false)
            },
            data: [220, 182, 191, 234, 290, 330]
          }
        ]
      };
      this.chart = echarts.init(this.$refs.barchat)
      this.chart.setOption(option)
    },
    getSCE1() {
      let seriesdata = [
        { name: "销售数量", data: [45, 25, 48, 62, 35] }, 
        { name: "总销售额", data: [23, 12, 52, 14, 9] }, 
        { name: "平均销售价格", data: [43, 12, 32, 14, 19] }
      ]
      // 组装数据
      let arr = []
      let one = [
        {
          name: 'b2',
          type: 'bar',
          barWidth: 40, // 柱条的宽度，不设时自适应。
          data: data,
          itemStyle: {
            color: (params) => {
              const i = params.dataIndex
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 1 === 1 ? this.color[0].leftStartColor : this.color[1].leftStartColor },
                { offset: 0.45, color: 1 === 1 ? this.color[0].leftStartColor : this.color[1].leftStartColor },
                { offset: 1, color: 1 === 1 ? this.color[0].leftEndColor : this.color[1].leftEndColor }
              ])
            }
          }
        },
        {
          name: 'b2',
          type: 'bar',
          barWidth: 20, // 柱条的宽度，不设时自适应。
          // barGap: "100%", // 不同系列的柱间距离
          // barGap: '-100%',
          // barCategoryGap: '-100%',
          data: data,
          itemStyle: {
            color: (params) => {
              const i = params.dataIndex
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 2 === 1 ? this.color[0].rightStartColor : this.color[1].rightStartColor },
                { offset: 0.65, color: 2 === 1 ? this.color[0].rightStartColor : this.color[1].rightStartColor },
                { offset: 1, color: 2 === 1 ? this.color[0].rightEndColor : this.color[1].rightEndColor }
              ])
            },
            borderWidth: 0.1,
            // borderColor: 'transparent'
            borderColor: this.color[0].rightStartColor
          }
        },
        // 底部
        {
          z: 3,
          name: 'b2',
          type: "pictorialBar",
          symbol: "diamond",//底部组件形状，不写默认为椭圆
          symbolOffset: [10, "50%"],//与柱子的偏移角度
          symbolSize: [40, 20],//底面[宽，高]
          itemStyle: {
            color: (params) => {
              const i = params.dataIndex
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: i % 2 === 1 ? this.color[0].rightStartColor : this.color[1].rightStartColor },
                { offset: 1, color: i % 2 === 1 ? this.color[0].rightEndColor : this.color[1].rightEndColor }
              ])
            },
          },
          tooltip: {
            show: false,
          },
          data: data,//此数据对应底部组件
        },
        // 数据顶部的样式
        {
          name: 'b2',
          type: 'pictorialBar',
          symbol: 'diamond',
          // symbolSize: [16, 9],
          symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
          symbolOffset: [10, -5],
          symbolPosition: 'end',
          z: 3,
          itemStyle: {
            color: (params) => {
              const i = params.dataIndex
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: i % 2 === 1 ? this.color[0].topStartColor : this.color[1].topStartColor },
                { offset: 1, color: i % 2 === 1 ? this.color[0].topEndColor : this.color[1].topEndColor }
              ])
            },
            label: {
              show: false, // 开启显示
              position: 'top', // 在上方显示
              textStyle: {
                fontSize: '12',
                color: '#B0E1FF'
              }
            }
          },
          data: data
        }
      ]
      let one1 = []
      // 计划开工项目
      var zzx1 = [20, 19, 40];
      var zx = zzx1.map((item) => {
        return 1000 - item;
      });
      // 累积开工项目
      var wgx1 = [10, 1, 90];
      var wg = wgx1.map((item) => {
        return 100 - item;
      });
      let series = [
        {
          z: 1,
          name: '柱子1',
          type: 'bar',
          
          barWidth:barWidth,
          // barGap: "15%", //相邻柱子间距
          itemStyle: {
            borderRadius: [0, 0, 0, 0],//柱子四周圆角
            color: color1//柱子左右颜色（深，浅）
            // color: (params) => {
            //   const i = params.dataIndex
            //   return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     { offset: 0, color: 1 === 1 ? this.color[0].leftStartColor : this.color[1].leftStartColor },
            //     { offset: 0.45, color: 1 === 1 ? this.color[0].leftStartColor : this.color[1].leftStartColor },
            //     { offset: 1, color: 1 === 1 ? this.color[0].leftEndColor : this.color[1].leftEndColor }
            //   ])
            // }
          },
          data: vehicle //Y轴上的高度
        },
        {
          z: 2,
          name: '柱子1',
          type: "pictorialBar",
          data: constData1,//此数据对应底部组件
          symbol: "diamond",//底部组件形状，不写默认为椭圆
          symbolOffset: [-40, "50%"],//与柱子的偏移角度
          symbolSize: [25, 10],//底面[宽，高]
          itemStyle: {
            normal: {
              color: color1,//底面左右颜色（深，浅）
              // borderColor: colorArr1[2],
              // borderWidth: 2,  //加上棱角分明
            },
          },
          tooltip: {
            show: false,
          },
        },
        {
          z: 3,
          name: '柱子1',
          type: "pictorialBar",
          symbolPosition: "end",
          data: showData1,//此数据对应顶部组件
          symbol: "diamond",
          symbolOffset: [-40, "-50%"],
          symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
          itemStyle: {
            normal: {
              borderColor: colorArr1[2],
              borderWidth: 2,  //加上棱角分明
              color: colorArr1[2]
            },
          },
          tooltip: {
            show: false,
          },
        },
        // --------------------------------------
        {
          z: 1,
          name: '柱子2',
          type: 'bar',
          
          barWidth: barWidth,
          itemStyle: {
            borderRadius: [0, 0, 0, 0],
            color: color2
          },
          data: controlBall
        },
        {
          z: 2,
          name: '柱子2',
          type: "pictorialBar",
          data: constData2,
          symbol: "diamond",
          symbolOffset: [0, "50%"],
          symbolSize: [25, 10], //=========================
          itemStyle: {
            normal: {
              color: color2
            },
          },
          tooltip: {
            show: false,
          },
        },
        {
          z: 3,
          name: '柱子2',
          type: "pictorialBar",
          symbolPosition: "end",
          data: showData2,
          symbol: "diamond",
          symbolOffset: [0, "-50%"],
          symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
          itemStyle: {
            normal: {
              /* 	borderColor: colorArr2[2],
                borderWidth: 2, */
              color: colorArr2[2]
            },
          },
          tooltip: {
            show: false,
          },
        },
        // ------------------------------
        {
          z: 1,
          name: '柱子3',
          type: 'bar',
          
          barWidth: barWidth,
          itemStyle: {
            borderRadius: [0, 0, 0, 0],
            color: color3
          },
          data: barth
        },
        {
          z: 2,
          name: '柱子3',
          type: "pictorialBar",
          data: constData3,
          symbol: "diamond",
          symbolOffset: [40, "50%"],
          symbolSize: [25, 10], //=========================
          itemStyle: {
            normal: {
              color: color3
            },
          },
          tooltip: {
            show: false,
          },
        },
        {
          z: 3,
          name: '柱子3',
          type: "pictorialBar",
          symbolPosition: "end",
          data: showData3,
          symbol: "diamond",
          symbolOffset: [40, "-50%"],
          symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
          itemStyle: {
            normal: {
              /* 	borderColor: colorArr2[2],
                borderWidth: 2, */
              color: colorArr3[2]
            },
          },
          tooltip: {
            show: false,
          },
        }
      ]
      // console.log('series', series)
      let arr1 = []
      let offetsdata = []//偏移数据
      seriesdata.map((item,index)=>{
        let constDataPublic = []
        if(item.data && item.data.length>0){
          item.data.map((item)=>{
            constDataPublic.push(1)
          })
        }
        offetsdata.push(-40+(40*index))
        if(index == 0){
          one = [
            {
              z: 1,
              name: '柱子1',
              type: 'bar',
              barWidth: barWidth,
              // barGap: "15%", //相邻柱子间距
              itemStyle: {
                borderRadius: [0, 0, 0, 0],//柱子四周圆角
                color: color1//柱子左右颜色（深，浅）
              },
              data: vehicle //Y轴上的高度
            },
            {
              z: 2,
              name: '柱子1',
              type: "pictorialBar",
              data: constData1,//此数据对应底部组件
              symbol: "diamond",//底部组件形状，不写默认为椭圆
              symbolOffset: [-40, "50%"],//与柱子的偏移角度
              symbolSize: [25, 10],//底面[宽，高]
              itemStyle: {
                normal: {
                  color: color1,//底面左右颜色（深，浅）
                  // borderColor: colorArr1[2],
                  // borderWidth: 2,  //加上棱角分明
                },
              },
              tooltip: {
                show: false,
              },
            },
            {
              z: 3,
              name: '柱子1',
              type: "pictorialBar",
              symbolPosition: "end",
              data: showData1,//此数据对应顶部组件
              symbol: "diamond",
              symbolOffset: [-40, "-50%"],
              symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
              itemStyle: {
                normal: {
                  borderColor: colorArr1[2],
                  borderWidth: 2,  //加上棱角分明
                  color: colorArr1[2]
                },
              },
              tooltip: {
                show: false,
              },
            },
          ]
        } 
        else if (index == 1){
          one = [
            {
              z: 1,
              name: '柱子2',
              type: 'bar',

              barWidth: barWidth,
              itemStyle: {
                borderRadius: [0, 0, 0, 0],
                color: color2
              },
              data: controlBall
            },
            {
              z: 2,
              name: '柱子2',
              type: "pictorialBar",
              data: constData2,
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [25, 10], //=========================
              itemStyle: {
                normal: {
                  color: color2
                },
              },
              tooltip: {
                show: false,
              },
            },
            {
              z: 3,
              name: '柱子2',
              type: "pictorialBar",
              symbolPosition: "end",
              data: showData2,
              symbol: "diamond",
              symbolOffset: [0, "-50%"],
              symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
              itemStyle: {
                normal: {
                  /* 	borderColor: colorArr2[2],
                    borderWidth: 2, */
                  color: colorArr2[2]
                },
              },
              tooltip: {
                show: false,
              },
            },
          ]
        }
        else if(index == 2){
          one = [
            {
              z: 1,
              name: '柱子3',
              type: 'bar',

              barWidth: barWidth,
              itemStyle: {
                borderRadius: [0, 0, 0, 0],
                color: color3
              },
              data: barth
            },
            {
              z: 2,
              name: '柱子3',
              type: "pictorialBar",
              data: constData3,
              symbol: "diamond",
              symbolOffset: [40, "50%"],
              symbolSize: [25, 10], //=========================
              itemStyle: {
                normal: {
                  color: color3
                },
              },
              tooltip: {
                show: false,
              },
            },
            {
              z: 3,
              name: '柱子3',
              type: "pictorialBar",
              symbolPosition: "end",
              data: showData3,
              symbol: "diamond",
              symbolOffset: [40, "-50%"],
              symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
              itemStyle: {
                normal: {
                  color: colorArr3[2]
                },
              },
              tooltip: {
                show: false,
              },
            }
          ]
        }
        
        one1 = [
          {
            z: 1,
            name: item.name,
            type: 'bar',
            barWidth: barWidth,
            // barGap: "15%", //相邻柱子间距
            itemStyle: {
              borderRadius: [0, 0, 0, 0],//柱子四周圆角
              color: color1,//柱子左右颜色（深，浅）
            },
            data: item.data //Y轴上的高度
          },
          {
            z: 2,
            name: item.name,
            type: "pictorialBar",
            data: constDataPublic,//此数据对应底部组件
            symbol: "diamond",//底部组件形状，不写默认为椭圆
            symbolOffset: [offetsdata[index], "50%"],//与柱子的偏移角度
            symbolSize: [25, 10],//底面[宽，高]
            itemStyle: {
              normal: {
                color: color1,//底面左右颜色（深，浅）
                // borderColor: colorArr1[2],
                // borderWidth: 2,  //加上棱角分明
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            name: item.name,
            type: "pictorialBar",
            symbolPosition: "end",
            data: item.data,//此数据对应顶部组件
            symbol: "diamond",
            symbolOffset: [offetsdata[index], "-50%"],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                color: colorArr1[2]
              },
            },
            tooltip: {
              show: false,
            },
          },
        ]
        arr1.push(one)
        arr.push(one1)
      })
      // console.log('重组数据',arr)
      
      // console.log('-----', arr1.flat())
      // 数组拉平
      let flatarr = arr.flat()
      // console.log('拉平数据', flatarr)
      const option = {
        tooltip: {},
        xAxis: {
          data: ['A', 'B', 'C','D','E'],
          axisLabel: {
            inside: false,
            textStyle: {
              color: '#000'
            }
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: flatarr
        // series: [
        //   // 中间柱子
        //   // {
        //   //   z: 1,
        //   //   type: 'bar',
        //   //   name: '柱子1',
        //   //   barWidth: barWidth,
        //   //   barGap: "0%", //相邻柱子间距
        //   //   itemStyle: {
        //   //     borderRadius: [0, 0, 0, 0],//柱子四周圆角
        //   //     color: color1//柱子左右颜色（深，浅）
        //   //     // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   //     //   // 这里 offset: 0 1 ,表示从下往上的渐变色
        //   //     //   {
        //   //     //     offset: 0, // 0%处的颜色
        //   //     //     color: "rgba(31, 155, 255, 1)"
        //   //     //   },
        //   //     //   {
        //   //     //     offset: 1, // 100%处的颜色
        //   //     //     color: "rgba(0, 229, 255, 1)"
        //   //     //   }
        //   //     // ])
        //   //     // color: (params) => {
        //   //     //   const i = params.dataIndex
        //   //     //   return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   //     //     { offset: 0, color: i % 2 === 1 ? this.color[0].leftStartColor : this.color[1].leftStartColor },
        //   //     //     { offset: 1, color: i % 2 === 1 ? this.color[0].leftEndColor : this.color[1].leftEndColor }
        //   //     //   ])
        //   //     // }
        //   //   },
        //   //   data: vehicle //Y轴上的高度
        //   // },
        //   // // 底部组件形状
        //   // {
        //   //   z: 2,
        //   //   name: '柱子1',
        //   //   type: "pictorialBar",
        //   //   symbol: "diamond",//底部组件形状，不写默认为椭圆
        //   //   symbolOffset: ["0%", "50%"],//与柱子的偏移角度
        //   //   symbolSize: [25, 10],//底面[宽，高]
        //   //   itemStyle: {
        //   //     normal: {
        //   //       color: color1//底面左右颜色（深，浅）
        //   //     },
        //   //   },
        //   //   tooltip: {
        //   //     show: false,
        //   //   },
        //   //   data: constData1,//此数据对应底部组件
        //   // },
        //   // // 顶部
        //   // {
        //   //   z: 3,
        //   //   name: '柱子1',
        //   //   type: "pictorialBar",
        //   //   symbolPosition: "end",
        //   //   data: showData1,//此数据对应顶部组件
        //   //   symbol: "diamond",
        //   //   symbolOffset: ["0%", "-50%"],
        //   //   symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        //   //   itemStyle: {
        //   //     normal: {
        //   //       /* borderColor: colorArr1[2],
        //   //       borderWidth: 2, */ //加上棱角分明
        //   //       color: colorArr1[2]
        //   //     },
        //   //   },
        //   //   tooltip: {
        //   //     show: false,
        //   //   },
        //   // },



        //   {
        //     name: 'b2',
        //     type: 'bar',
        //     barWidth: 40, // 柱条的宽度，不设时自适应。
        //     data: data,
        //     itemStyle: {
        //       color: (params) => {
        //         const i = params.dataIndex
        //         return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: 1 === 1 ? this.color[0].leftStartColor : this.color[1].leftStartColor },
        //           { offset: 0.45, color: 1 === 1 ? this.color[0].leftStartColor : this.color[1].leftStartColor },
        //           { offset: 1, color: 1 === 1 ? this.color[0].leftEndColor : this.color[1].leftEndColor }
        //         ])
        //       }
        //     }
        //   },
        //   {
        //     name: 'b2',
        //     type: 'bar',
        //     barWidth: 20, // 柱条的宽度，不设时自适应。
        //     // barGap: "100%", // 不同系列的柱间距离
        //     barGap: '-100%',
        //     barCategoryGap: '-100%',
        //     data: data,
        //     itemStyle: {
        //       color: (params) => {
        //         const i = params.dataIndex
        //         return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: 2 === 1 ? this.color[0].rightStartColor : this.color[1].rightStartColor },
        //           { offset: 0.65, color: 2 === 1 ? this.color[0].rightStartColor : this.color[1].rightStartColor },
        //           { offset: 1, color: 2 === 1 ? this.color[0].rightEndColor : this.color[1].rightEndColor }
        //         ])
        //       },
        //       borderWidth: 0.1,
        //       // borderColor: 'transparent'
        //       borderColor: this.color[0].rightStartColor
        //     }
        //   },
        //   // 底部
        //   {
        //     z: 3,
        //     name: 'b2',
        //     type: "pictorialBar",
        //     symbol: "diamond",//底部组件形状，不写默认为椭圆
        //     symbolOffset: [10, "50%"],//与柱子的偏移角度
        //     symbolSize: [40, 20],//底面[宽，高]
        //     itemStyle: {
        //       color: (params) => {
        //         const i = params.dataIndex
        //         return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: i % 2 === 1 ? this.color[0].rightStartColor : this.color[1].rightStartColor },
        //           { offset: 1, color: i % 2 === 1 ? this.color[0].rightEndColor : this.color[1].rightEndColor }
        //         ])
        //       },
        //     },
        //     tooltip: {
        //       show: false,
        //     },
        //     data: data,//此数据对应底部组件
        //   },
        //   // 数据顶部的样式
        //   {
        //     name: 'b2',
        //     type: 'pictorialBar',
        //     symbol: 'diamond',
        //     // symbolSize: [16, 9],
        //     symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        //     symbolOffset: [10, -5],
        //     symbolPosition: 'end',
        //     z: 3,
        //     itemStyle: {
        //       color: (params) => {
        //         const i = params.dataIndex
        //         return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: i % 2 === 1 ? this.color[0].topStartColor : this.color[1].topStartColor },
        //           { offset: 1, color: i % 2 === 1 ? this.color[0].topEndColor : this.color[1].topEndColor }
        //         ])
        //       },
        //       label: {
        //         show: false, // 开启显示
        //         position: 'top', // 在上方显示
        //         textStyle: {
        //           fontSize: '12',
        //           color: '#B0E1FF'
        //         }
        //       }
        //     },
        //     data: data
        //   }
          
        // ]
      };
      this.chart1 = echarts.init(this.$refs.barchat1)
      this.chart1.setOption(option)
    },
  }
}
</script>
<style lang="scss" scoped>
  .barecharts{
    width: 100%;
    height: 400px;
  }
</style>